<template>
  <div class="home">
    <div class="filter">
      <el-input v-model="filterText" placeholder="请输入" @input="handleInput" clearable></el-input>
    </div>
    <my-table :tableData="tableData" :tableColumns="tableColumns" :btnsInfo="btnsInfo" :objectSpanMethod="objectSpanMethod" @handleClick="handleClick"></my-table>
    <my-pagination class="pagination" :paginator="paginator" @handleCurChange="handleCurChange" @handleSizeChange="handleSizeChange"></my-pagination>
  </div>
</template>

<script>
import { paginator, filterInput } from '@/mixins'
export default {
  name: 'home-view',
  mixins: [paginator, filterInput],
  data () {
    return {
      highlightMap: {
        valid: 'green',
        invalid: 'red'
      },
      tableData: [
        { chinese: 99, english: 100, math: 80, status: 'valid' },
        { chinese: 99, english: 100, math: 80, status: 'invalid' }
      ],
      tableColumns: [
        {
          label: '语文',
          prop: 'chinese',
          formatter: (row) => row.chinese + '牛逼',
          highlight: (row) => this.highlightMap[row.status]
        },
        { label: '英语', prop: 'english', highlight: (row) => 'red' },
        { label: '数学', prop: 'math' }
      ],
      btnsInfo: [
        { name: '详情', key: 'detail' },
        {
          name: (row) => row.status === 'valid' ? '失效' : '生效',
          key: (row) => row.status === 'valid' ? 'invalid' : 'valid',
          color: (row) => row.status === 'valid' ? 'red' : 'green',
          hidden: (row) => true,
          disabled: (row) => false
        }
      ]
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      const paginator = { ...this.paginator }
      const criteria = [] // 搜索栏参数
      if (this.filterText.trim()) {
        criteria.push({ criteriaKey: 'code', criteriaValue: this.filterText.trim() })
      }
      const params = { paginator, criteria }
      console.log('params:', params)
    },
    handleClick (key, row) {
      console.log('key:', key)
      console.log('row:', row)
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) {
      //   if (rowIndex % 2 === 0) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1
      //     }
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0
      //     }
      //   }
      // }
    }
  }
}
</script>

<style scoped lang="less">
.home {
  .filter {
    width: 20%;
    margin-bottom: 20px;
  }
  .pagination {
    margin-top: 20px;
  }
}
</style>
